/*
 * @Author: wangtao
 * @Date: 2020-11-09 11:32:02
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-05-27 17:56:34
 * @Description: 上传/修改回单每一个item content
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  PixelRatio,
  TouchableOpacity,
  TextInput,
} from 'react-native';
import {
  fontColorBlack,
  fontColorLightGray,
  fontColorSecDeepGray,
  mainBgColorLightGray,
  px2dp,
  splitLineColorLightGray,
} from '@/styles';
import { _ } from '@/common';
import { iconDeleteGray } from '@/images';
import ReceiptCameraCard from './receipt-camera-card';

export default class ReceiptItemContent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const {
      type,
      selectImg,
      onChange,
      detail,
      detailsIndex,
      itemIndex,
      deleteCard,
      weightUnit,
      unitOptionsObj,
    } = this.props;
    return (
      <View style={styles.itemContentWrap}>
        <View style={styles.itemContentTitleWrap}>
          <Text style={styles.itemContentTitle}>
            {type === 'loading' && `发货单${detailsIndex + 1}`}
            {type === 'unloading' && `收货单${detailsIndex + 1}`}
            <Text style={styles.itemContentTitleDesc}>(必填)</Text>
          </Text>
          {detailsIndex !== 0 && (
            <TouchableOpacity
              style={styles.itemContentTitleDeleteWrap}
              onPress={() => {
                deleteCard(detailsIndex);
              }}
            >
              <Image
                source={iconDeleteGray}
                resizeMode='stretch'
                style={styles.itemContentTitleDelete}
              />
              <Text style={styles.itemContentTitleDesc}>删除</Text>
            </TouchableOpacity>
          )}
        </View>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <ReceiptCameraCard
            title='添加图片'
            selectImg={() => selectImg('fileUrl', detailsIndex, itemIndex)}
            picUrl={detail.fileUrl}
            cardWrapStyle={{
              width: px2dp(312),
              height: px2dp(312),
              borderRadius: px2dp(8),
            }}
          />
          <View style={{ justifyContent: 'space-between' }}>
            {/* 毛重 */}
            {this._renderRoughWeight()}
            {/* 皮重 */}
            {this._renderTarWeight()}
            {/* 净重 */}
            {this._renderNetWeight()}
          </View>
        </View>
      </View>
    );
  }

  // 判断是否需要填写皮重毛重以及手动输入净重 true 需要填写毛重净重
  whetherInPut = () => {
    const { weightUnit, isWeighing } = this.props;
    if (weightUnit == 'ton' || weightUnit == 'kg') {
      // 判断isWeighing字段是否存在(以前的订单没有这个字段)
      // 不存在：按之前的业务逻辑单位为ton或者kg则填写 否则不填
      // 存在：1 需要过磅 2 不需过磅； 需要过磅则填写 不需要过磅判断单位 ton或者kg则填写 否则不填
      if (!isWeighing) {
        return true;
      } if (isWeighing == 1) {
        return true;
      } if (isWeighing == 2) {
        return false;
      }
    }
    return false;
  }

  // 毛重
  _renderRoughWeight = () => {
    const {
      onChange,
      detail,
      detailsIndex,
      itemIndex,
      weightUnit,
      unitOptionsObj,
    } = this.props;
    const inputView = (
      <View style={styles.inputItemWrap}>
        <Text style={styles.inputLabel}>毛重</Text>
        <TextInput
          style={styles.input}
          placeholder='必填'
          placeholderTextColor={fontColorLightGray}
          keyboardType='decimal-pad'
          value={detail.roughWeight}
          onChangeText={(val) => {
            // 清理非数字.
            val = _.clearNoNum(val);
            // 保留两位小数
            val = _.clearDotNumTo2(val);

            onChange('roughWeight', val, detailsIndex, itemIndex);
            onChange(
              'netWeight',
              (val - (detail.tarWeight || 0)).toFixed(2),
              detailsIndex,
              itemIndex,
            );
          }}
          onBlur={() => {
            if (Number(detail.roughWeight) == 0) {
              onChange('roughWeight', '', detailsIndex, itemIndex);
            }
          }}
        />
        <Text style={styles.inputLabel}>{unitOptionsObj[weightUnit]}</Text>
      </View>
    );
    return this.whetherInPut() ? inputView : null;
  };

  // 皮重
  _renderTarWeight = () => {
    const {
      onChange,
      detail,
      detailsIndex,
      itemIndex,
      weightUnit,
      unitOptionsObj,
    } = this.props;
    const inputView = (
      <View style={styles.inputItemWrap}>
        <Text style={styles.inputLabel}>皮重</Text>
        <TextInput
          style={styles.input}
          placeholder='必填'
          placeholderTextColor={fontColorLightGray}
          keyboardType='decimal-pad'
          value={detail.tarWeight}
          onChangeText={(val) => {
            // 清理非数字.
            val = _.clearNoNum(val);
            // 保留两位小数
            val = _.clearDotNumTo2(val);

            onChange('tarWeight', val, detailsIndex, itemIndex);
            onChange(
              'netWeight',
              ((detail.roughWeight || 0) - val).toFixed(2),
              detailsIndex,
              itemIndex,
            );
          }}
          onBlur={() => {
            if (Number(detail.tarWeight) == 0) {
              onChange('tarWeight', '', detailsIndex, itemIndex);
            }
          }}
        />
        <Text style={styles.inputLabel}>{unitOptionsObj[weightUnit]}</Text>
      </View>
    );
    return this.whetherInPut() ? inputView : null;
  };

  // 净重
  _renderNetWeight = () => {
    const {
      onChange,
      detail,
      detailsIndex,
      itemIndex,
      weightUnit,
      unitOptionsObj,
    } = this.props;

    // 当满足其中单位时候填写或展示
    let weightList = ['ton', 'kg', 'piece', 'square'];

    // 单位翻译
    let weightUnitText = {
      ton: '净重',
      kg: '净重',
      piece: '件数',
      square: '方数',
    };

    let text = weightUnitText[weightUnit];

    // 不需要输入 自动计算时候展示
    const notNeedInputView = (
      <View style={[styles.inputItemWrap, { backgroundColor: '#FAFAFA' }]}>
        <Text style={styles.inputLabel}>{text}</Text>
        <Text style={styles.inputNum}>
          {_.clearDotNumTo2(detail.netWeight || '0.00')}
        </Text>
        <Text style={styles.inputLabel}>{unitOptionsObj[weightUnit]}</Text>
      </View>
    );

    // 需要输入单位
    const needInputView = (
      <View style={[styles.inputItemWrap, { backgroundColor: '#FAFAFA' }]}>
        <Text style={styles.inputLabel}>{text}</Text>
        <TextInput
          style={styles.input}
          placeholder='必填'
          placeholderTextColor={fontColorLightGray}
          keyboardType='decimal-pad'
          defaultValue={detail.netWeight}
          value={detail.netWeight}
          onChangeText={(val) => {
            // 清理非数字.
            val = _.clearNoNum(val);
            // 保留两位小数
            val = _.clearDotNumTo2(val);
            onChange('netWeight', val, detailsIndex, itemIndex);
          }}
          onBlur={() => {
            if (Number(detail.netWeight) == 0) {
              onChange('netWeight', '', detailsIndex, itemIndex);
            }
          }}
        />
        <Text style={styles.inputLabel}>{unitOptionsObj[weightUnit]}</Text>
      </View>
    );
    if (weightList.includes(weightUnit)) {
      // 为true时候自动计算，否则手动输入
      return this.whetherInPut() ? notNeedInputView : needInputView;
    }
    return null;
  }
}
const styles = StyleSheet.create({
  itemContentWrap: {
    paddingHorizontal: px2dp(24),
    paddingBottom: px2dp(24),
    borderTopColor: splitLineColorLightGray,
    borderTopWidth: 1 / PixelRatio.get(),
  },
  itemContentTitleWrap: {
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  itemContentTitle: {
    marginTop: px2dp(8),
    height: px2dp(88),
    lineHeight: px2dp(88),
    fontSize: px2dp(32),
    color: fontColorBlack,
    fontWeight: 'bold',
    flex: 1,
  },
  itemContentTitleDeleteWrap: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  itemContentTitleDelete: {
    width: px2dp(26),
    height: px2dp(26),
    marginRight: px2dp(8),
  },
  itemContentTitleDesc: {
    fontSize: px2dp(28),
    color: fontColorSecDeepGray,
    fontWeight: 'normal',
  },
  inputItemWrap: {
    backgroundColor: mainBgColorLightGray,
    flexDirection: 'row',
    width: px2dp(318),
    height: px2dp(88),
    borderRadius: px2dp(8),
    alignItems: 'center',
    paddingHorizontal: px2dp(24),
  },
  inputLabel: {
    fontSize: px2dp(28),
    color: fontColorSecDeepGray,
  },
  input: {
    flex: 1,
    height: px2dp(88),
    textAlign: 'right',
    paddingRight: px2dp(10),
    fontSize: px2dp(28),
    color: fontColorBlack
  },
  inputNum: {
    flex: 1,
    textAlign: 'right',
    fontSize: px2dp(28),
    color: fontColorSecDeepGray,
    marginRight: 2,
  },
});
